<template>
    <div>
        <el-table
                :data="tableData"
                style="line-height:20px;"
                :cell-style="rowStyle"
                :header-cell-style="{'text-align':'center'}"
                :stripe="true">
            <el-table-column prop="orderno" label="订单编号" width="140"></el-table-column>
            <el-table-column prop="shopname" label="店铺名称" width="85"></el-table-column>
            <el-table-column prop="shopphone" label="店铺手机号" width="120"></el-table-column>
            <el-table-column prop="userName" label="收货人姓名" width="90"></el-table-column>
            <el-table-column prop="userphone" label="收货手机号"  width="120"></el-table-column>
            <el-table-column prop="useraddress" label="收货地址" width="130"></el-table-column>
            <el-table-column prop="dishtime" label="订单创建时间" width="160"></el-table-column>
            <el-table-column prop="gmtpayment" label="订单支付时间" width="160"></el-table-column>
            <el-table-column prop="state" label="订单状态" :formatter="realstate" width="130"></el-table-column>
            <el-table-column label="操作" fixed="right" width="230px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="show(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-if="scope.row.state!==1">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align: center">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="list1.length">
            </el-pagination>
        </div>
      <el-button :plain="true" @click="open2()" Style="display:none">成功</el-button>
    </div>

</template>

<script>
import order from "@/api/order";
export default {
  props:[
    'number'
  ],
  data(){
    return{
      list:[],
      goodList:[],
      tableData:[],
      list1:[],
      pageNum:1
    }
  },
  methods:{
    realstate(row){
      if(row.state===1){
        return '待支付'
      }else if(row.state===2){
        return '支付完成/在配送'
      }else if(row.state===3){
        return '已完成/待评价'
      }else if(row.state===4){
        return '评价已完成'
      }else if(row.state===5){
        return '订单已取消'
      }
    },
    rowStyle() {
      return "text-align:center";
    },
    open2() {
      this.$message({
        message: '删除成功',
        type: 'success'
      });
    },
    findAllOrder(){
      // console.log(this.user)
      const uid = sessionStorage.getItem("uid");
      const sid = 2;
      order.findOneOrderBySid(sid).then((response)=>{
        console.log(response.data.data)
        this.list1 = response.data.data;
        this.tableData = this.list1.slice(this.pageNum-1,10)
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.tableData = this.list.slice((this.pageNum-1)*10,this.pageNum*10)
    },
    handleDelete(row){
      order.updateStoreStateByOrderNo(row.orderno).then((response)=>{
        if (response.data.data>0){
          this.open2();
          this.findAllOrder();
        }
      })
    },
    //评价  对该订单进行评价  前端需要传回订单评分及订单评价  以及订单编号   同时更新店铺的评价分   order.updateAppraise(orders).then((response)=>{})
    openAppraise(row){

    },
    findNoPay(){
        const uid = sessionStorage.getItem("uid");
        const sid = 2;
        order.findAllStateBySid1(sid).then((response)=>{
            console.log(response.data.data)
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findFinish(){
        const uid = sessionStorage.getItem("uid");
        const sid = 2;
        order.findAllStateBySid3(sid).then((response)=>{
            console.log(response.data.data)
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findApped(){
        const uid = sessionStorage.getItem("uid");
        const sid = 2;
        order.findAllStateBySid4(sid).then((response)=>{
            console.log(response.data.data)
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findCancel(){
        const uid = sessionStorage.getItem("uid");
        const sid = 2;
        order.findAllStateBySid5(sid).then((response)=>{
            console.log(response.data.data)
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    choose(){
        switch (this.number){
            case 0:
                this.findAllOrder();
                break;
            case 1:
                this.findNoPay();
                break;
            case 3:
                this.findFinish();
                break;
            case 4:
                this.findApped();
                break;
            case 5:
                this.findCancel();
                break;
        }
    }
  },
  created() {
    this.choose()
  },

}
</script>

<style scoped>
.image{
  width: 160px;
  height: 160px;
  border-radius: 4px;
}
.title{
  color: #606266
}
p{
  color: #606266;
  line-height: 30px;
}
.pdiv{
  position:absolute;
  bottom:0;
  line-height: 25px;
  font-size: 17px
}
.el-divider--horizontal{
  width: 80%;
  margin: 24px auto;
}
.el-input-number{
  margin-right: 20px;
  position: absolute;
  right: 30px;
  bottom: 10px;
}
::v-deep .el-table--fit{
    height: 463px;
}
::v-deep .el-table__body-wrapper{
    height: 414px;
}
</style>